body {
  background-color: #000000;
  background-image: url(../Graphics/background002.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0px;
  padding: 0px;
}

noscript {
  position: absolute;
  background-color: yellow;
  border: 2px solid black;
  font-size: 18px;
  text-align: center;
  width: 900px;
  height: 40px;
  padding: 8px;
}

#homeView {
  margin-top: 40px;
}

/* home buttons */
.aButton {
  border: 1px solid #aaaaaa;
  background-color: navy;
  margin: 10px;
  width: 180px;
  height: 90px;
  cursor: pointer;
}

.aButtonHead {
  font-weight: bold;
  color: #FFffff;
  font-size: 18px;
  padding-top: 7px;
  margin-left: 65px;
}

.aButton a {
  text-decoration: none;
}

.aButtonHead a:hover {
  color: white;
}

.aButtonDesc {
  color: black;
  width: 110px;
  float: right;
  font-size: 11px;
}


#calendarButton {
  background-image: url(../Graphics/indexButtonsBgrd.png);

}

#calendarButton .aButtonHead {
  color: crimson;
}
#visualizationsButton {
  background-image: url(../Graphics/indexButtonsBgrd.png);
  background-position: 0px -91px;
}

#visualizationsButton .aButtonHead {
  color: navy;
}
#songsButton {
  background-image: url(../Graphics/indexButtonsBgrd.png);
  background-position: 0px -182px;
}

#songsButton .aButtonHead {
  color: yellow;
}
#jewelTubeButton {
  background-image: url(../Graphics/indexButtonsBgrd.png);
  background-position: 0px -273px;
}

#jewelTubeButton .aButtonHead {
  color: green;
}

/* new menu control bar */
#controlBar {
  position: absolute;
  z-index: 99999;
  width: 100%;
  height: 28px;
  top: 0px;
  padding-top: 2px;
  background-color: #eeeeee;
  border-bottom: 1px solid white;
}

#menu li a:active
{
outline: none;
}

#menu li a:focus
{
-moz-outline-style: none;
}

#menuContainer {
  width: 120px;
  float: left;
/*  border-right: 1px solid #dddddd; */
}

.menuText {
  float: left;
  padding-left: 5px;
}

#homeMenu {
  padding-top: 2px;
  cursor: pointer;
  font-size: 14px;
  width: 130px;
}

.aMenu {
  position: absolute;
  z-index: 99999;
  background-color: white;
  list-style: none;
  padding: 0;
  margin-top: 1px;
  border-left: 1px solid #444444;
  border-right: 2px solid #999999;
  border-bottom: 2px solid #999999;
  clear: both;
  float: left;
  display: none;
}

#menu {
  left: 0px; top: 30px;
/*  border-right: 1px solid black; */
  width: 130px;
}

.menuItem {
  padding-top: 4px;
  border-bottom: 1px solid #dddddd;
}

#menu li {
  /*
  padding-top: 4px;
  border-bottom: 1px solid #444444;
  */
}

/*
#menu li:hover {
  background-color: #ffeedd;
}
*/

#menu li a {
  text-decoration: none;
  font-size: 13px;
  vertical-align: 15%;
  padding-left: 5px;

}

.triangleIcon {
  padding-left: 2px;
  float: left;
}

#windowControl {
  width: 86px;
  height: 20px;
  padding-left: 5px;
  float: left;
}

#showWindowsButton {
  cursor: pointer;
  float: left;
/*  border-right: 1px solid #cccccc; */

}

#openWindows {
  left: 2px; top: 30px;
  width: 130px;
}

#openWindows li {

  padding-left: 2px;
  /*
  padding-top: 4px;
  border-bottom: 1px solid #444444;
  */
  font-size: 13px;
  cursor: pointer;
  height: 20px;
}

.menuItem:hover {
  background-color: #ffeedd;
}



.aDialog {
/*  display: none; */
}

.tabsImg {
  border: none;
  padding-left: 2px;
  padding-right: 2px;
  float: left;
  clear: both;
}


#controls {
  float: left;
/*  width: 85%; */
}


form {
  margin: 0px;
}

/* temp remove shadow which is crashing dialog in UI1.6RC6
.ui-widget-shadow { background: none; opacity: none; filter: none; display:
none !important; }
*/
/*
.ui-tabs-hide { display: none; }


.ui-tabs-nav li a {
  padding: 5px 7px !important;
}

.ui-tabs-panel {
  padding: 5px !important;
}
*/

#main {
  background-color: #ffffff;
}

#credits {
  font-size: 12px;
}

.gBranding {
  display: inline;
}

#piecesofukMain {
  clear: both;
}
.menuButton {
  background-color: #eeeeee;
  color: black;
  text-decoration: none;
  padding: 2px;
  font-size: 10px;
}

.menuButton:hover {
  color: red;
}

#siteLogo {
  float: left;
}

.tabsImg {
  border: none;
  float: left;
}

#feedStatus {

}

.feedinitialising {
  background-color: cyan;
}

.feedinitialised {
  background-color: blue;
}

.feedloading {
  background-color: yellow;
}

.feedcomplete {
  background-color: #00ff00;
}

.feedfailed {
  background-color: red;
}

#header {
/*  border-bottom: 1px solid #aaaaaa; */
}
/*
.aHeader {
  text-align: center;
  color: white;
  font-weight: bold;;
}

*/

#twitter {
  background-color: white;
  color: black;
  font-size: 10px;
  padding: 5px;
}

#twitter .ui-tabs-nav li a {
  padding: 4px;
}

.twitterUL {
  margin: 0px;
  padding-left: 15px;
}

.twitterEntry {
/*  font-size: 12px; */
  font-size: 10px;
  padding: 1px;
}

.twitterEntry:hover {
  background-color: yellow;
}

.viewTweet:hover {
  color: red !important;
}
#aboutView {
  position: absolute;
  left: -19999px;
  top: -19999px;
}

.about {
  padding: 5px;
}


#infoViewContainer {
  background-color: black;
  font-size: 12px;
  padding: 0px;
  float: left;
  display: none;
}

#infoView {
  background-color: black;
  color: white;
  font-size: 12px;
  padding: 0px;
  float: left;
}


#infoView a:link {
color:lime;
}
#infoView a:visited {
color:yellow;
}
#infoView a:active {
color:fuchsia;
}


.infoViewTitleImg { /* should be an ID??? */
  border: none;
  float: left;
  padding-right: 4px;
}

.infoView {
}

/*
#infoViewIconBar {
  background-color: black;
  width: 20px;
  float: right;
  height: 100%;
}

.iconBarIcon {
  opacity: .50;
}

.iconBarIconHighlight {
  opacity: 1.0;
  cursor: pointer;
}
*/

#ScreenCastData {
  position: absolute;
  left: -19999px;
  top: -19999px;
}

/*
#latest {
  background-color: black;
  padding: 10px;
  font-weight: bold;
  overflow: auto;
}

.latestItems {
  font-size: 10px;
  margin-left: 10px;
  color: white;
 }

.latestItemsContainer {
  cursor: pointer;
  color: yellow;
}
*/

#latest {
  padding: 10px;
  font-weight: bold;
  overflow: auto;
}

.latestItems {
  font-size: 10px;
  margin-left: 10px;
  color: black;
 }

.latestItemsContainer {
  cursor: pointer;
  color: navy;
}


.latestNew {
  font-size: 7px;
  color: red;
  font-weight: bold;
}


#about {
  padding: 10px;
  font-weight: bold;
}

#screencastBody {
  width: 300px;
  padding-left: 15px;
  padding-top: 15px;
}

#screencastBody p {
  font-weight: bold;
  font-size: 15pt;
  text-align: center;
  height: 10em;
  display: table-cell;
  vertical-align: middle;
}

#screencastBody a:link {
color:lime;
}
#screencastBody a:visited {
color:yellow;
}
#screencastBody a:active {
color:fuchsia;
}


#jewelsBlogContainer {
  margin-left: 5px;
  margin-bottom: 4px;
}

#jewelsBlogContainer .jScrollPaneTrack {
  background-color: white;
}


#jewelsBlogContainer .jScrollPaneDrag {
  background-color: red;
}


#jewelsBlogHead {
  font-size: 11px;
  font-weight: bold;
  padding-left: 2px;
  margin-top: 4px;
  }

#jewelsBlog {
  font-size: 10pt;
  padding: 5px;
  color: black;

}

/*
#jewelsBlog a:link {
color:lime;
}
#jewelsBlog a:visited {
color:yellow;
}
#jewelsBlog a:active {
color:fuchsia;
}
*/

.jewelsBlogTitle {
  font-size: 12px;
}

.jewelsBlogDate {
  font-size: 10px;
  font-style: italic;
  padding-left: 10px;
}

.jewelsBlogContent {
  padding-left: 4px;
  font-size: 12px;
  border-bottom: 1px solid #777777;
  display: none;
}


#POUKBlogContainer {
  margin-left: 2px;
  border-left: 1px solid #aaaaaa;

}

#POUKBlogContainer {
  background-color: white;
}


#POUKBlogContainer {
  background-color: green;
}

#POUKBlogHead {
  font-size: 11px;
  font-weight: bold;
  padding-left: 2px;
  margin-left: 5px;
  margin-top: 5px;
}

#news {
	color: black;
/*  height: 400px;
  overflow: auto; */
  margin-left: 5px;
}

/*
#news a:link {
color:lime;
}
#news a:visited {
color:yellow;
}
#news a:active {
color:fuchsia;
}
*/

#newsHead {
}

.bloggerSummary {
	padding-left: 5px;
  font-size: 12px;
  display: none;
}


.bloggerDiv {
	background-color: purple;
	border-bottom: 1px solid #777777;
	padding-left: 2px;
	padding-bottom: 2px;
  padding-right: 2px;
}

.blogDate {
  color: red;
  font-size: 12px;
}

.blogTitle {
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.blogLink {
  font-size: 10px;
}

#newsArchives {
	background-color: navy;
  color: white;
	font-size: 12pt;
	font-weight: bold;
  padding-left: 5px;
	text-align: center;
	}

#newsArchives a:link {
color:lime;
}
#newsArchives a:visited {
color:yellow;
}
#newsArchives a:active {
color:fuchsia;
}


.castData {
  position: absolute;
  left: -19999px;
  top: -19999px;
}

.testCastData {
  position: absolute;
  left: -19999px;
  top: -19999px;
}



#aboutBox {
  left: -9999px;
  position: absolute;
  top: 40px;
  width: 450px;
  z-index: 5;
  border-left: 1px solid white;
  border-top: 1px solid white;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

#aboutHead {
  background-color: navy;
  color: white;
}

#footer {
  position: absolute;
	clear: both;
  left: -1999px;

}
#lastModified {
	text-align: center;
	color: white;
	background-color: black;
}

#numVisitors {
	text-align: center;
		background-color: white;
}

#copyrightMsg {
	font-size: 9pt;
	background-color: rgb(204, 255, 255);
	border-top: solid black 1px;
  padding: 2px;
}

#creditsMsg {
	font-size: 9pt;
	background-color: white;
	border-top: solid black 1px;
    padding: 2px;
}

.trackList {
  border: 1px solid crimson;
  font-size: 12px;
  font-weight: bold;
  background-color: navy;
  color: white;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
}

.trackList td {
  font-size: 12px;
}


#hidden {
  visibility: hidden;
  position: absolute;
  left: -1999px;
  top: -1999px;
}

/* youTube player stuff, maybe want this in a separate css file? */



#youTubeDescription {
  font-weight: bold;
  padding: 10px;
}

.enhanced {
  border: 5px solid gold;
}

/*
#videoController {
  width: 50px;
  float: left;

}
*/

/*
#loadedContainer {
  position: relative;
  float: left;
  width: 7px;
  height: 240px;
  background-color: navy;
}
*/
/*
#loaded {
  position: absolute;
  left: 1px;
  width: 5px;
  height: 0px;
  background-color: red;
}
*/

/*
#played {
  position: absolute;
  right: 0px;
  width: 4px;
  height: 0px;
  background-color: green;
}
*/
/*
#skipPoints {
  width: 50px;
  height: 240px;
}
*/


/*
#time {
  float: left;
}

#skipTo {

}

#skipTo li {
  float: left;
  list-style: none;
  cursor: pointer;
  margin-right: 5px;
}
#skipTo b {
  display: none;
}
*/

#singles {
  padding: 5px;
  color: black;
}

#singles img {
  padding-right: 4px;

}

#singlesData {
  display: none;
}

#singlesCovers {
  margin-top: 40px;
}

.singles img {
  cursor: pointer;
  border: 1px solid white;
  margin: 4px;

}

#singlesCovers .singles span {
  display: none;
}


/* new songs styles */

#songs {
  overflow: auto;

}
.songTagsForm {
  display: none;
}

.songTagsHead {
  cursor: pointer;
  font-weight: bold;
}

.cloud0 {
	font-size: 10px;
	color: #cccccc !important;
}

.cloud1 {
	font-size: 14px;
	color: #cc4444 !important;

}

.cloud2 {
	font-size: 17px;
	color: #44aa44 !important;

}

.cloud3 {
	font-size: 20px;
	color: #444499 !important;

}

.cloud4 {
	font-size: 23px;
	color: #ff0000 !important;

}

.cloud5 {
	font-size: 26px;
	color: #00ff00 !important;

}

.cloud6 {
	font-size: 29px;
	color: #0000ff !important;

}

.cloud7 {
	font-size: 32px;
	color: #000000 !important;

}

.cloud8 {
	font-size: 35px;
	color: #ff00ff !important;

}

.cloud9 {
	font-size: 38px;
	color: #00ffff !important;

}

#songTagsControl {
  float: left;
}

#controlBarLoader {
  float: left;
  width: 50px;
}
